<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-30 20:02:30
 * @LastEditTime: 2019-11-26 09:56:27
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css" />
	<script type="text/javascript" src="../script/jquery.js"></script>
	<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../script/vue.min.js"></script>
	<script src="../script/vant.min.js"></script>
	<script type="text/javascript" src="../script/fastclick.js"></script>
	<script type="text/javascript" src="../script/base.js"></script>
	<style type="text/css">
		

		.bottom .bottom-left-label_ {
			padding: 0 190px 0 15px;
			line-height: 50px;
			overflow: hidden;
			color: #a6acb8;
			font-size: 14px;

		}

		.bottom .bottom-left-label_>span {
			vertical-align: middle
		}

		.bottom .bottom-left-label_>.number {
			color: #cd1b21;
			margin-right: 20px;
			font-size: 17px;
			font-weight: 700;
		}

		.bottom .bottom-right-button_ {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			width: 180px;
			padding: 10px 0;
		}

		.bottom .bottom-right-button_ button {
			border-radius: 0;
			height: 30px;
			line-height: 30px;
			width: 83px;
			border: 0;
		}

		.rad {
			font-size: 0;
			display: inline-block;
			border-radius: 15px;
			height: 30px;
			overflow: hidden !important;
		}

		.b-color-1 {
			background: linear-gradient(to right, #ffd01e, #ff8917);
		}

		.b-color-2 {
			background: linear-gradient(to right, #ff6034, #ee0a24);
		}

		.table {
			width: 100%;
			overflow: hidden;
		}
		table {
			width: 100%;
			overflow: hidden;
		}

		table tr th,
		table tr td {
			border: 0 !important;
			padding: 3px !important;
			font-size: 14px;
		}

		.line {
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.td-remark {
			color: #969799;
			width: 100%;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak >
		<div class="init-full">
			<van-nav-bar class="head" title="单据明细" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<div class="body-no-bottom">
				<div class="content content-padding">


					<div class="table">
						<table>
							<tr>
								<th colspan="4" style="text-align: center;font-size: 20px;background: transparent;">{{printData.title}}</th>
							</tr>
							<tr>
								<th colspan="4" style="text-align: center;font-size: 18px;background: transparent;">{{printData.subtitle}}</th>
							</tr>
							<tr v-for="(value,index) in printData.top">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-if="printData.node && printData.node.length">
								<td v-for="(value,index) in printData.node[0]">{{index}}</td>
							</tr>
							<tr v-for="(value1,index1) in printData.node">
								<td v-for="(value2,index2) in value1" :colspan="index2 == '备注'?4:1">
									<div v-show="index2=='备注'" class="td-remark" :style="{width:getWidth()}">{{value2}}</div>
                                    <div v-show="index2!='备注'">{{value2}}</div>
								</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-for="(value,index) in printData.center">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
							<tr>
								<td colspan="4">
									<div class="line" :style="{width:getWidth()}">
										----------------------------------------------------------------------------------------------------------------
									</div>
								</td>
							</tr>
							<tr v-for="(value,index) in printData.bottom">
								<td colspan="4">{{index}}：{{value}}</td>
							</tr>
						</table>
					</div>
					
				</div>
				<van-loading v-if="showLoading" />
			</div>
		</div>

	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();

		var historyData = api.pageParam.historyData;
		var userInfo = FLD.getUserInfo();
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				showMain: false,
				ifConfirm: false,
				type: 0,
				formID: 0,
				isPay: 1,
				payText: '',
				sealType: 0,
				formData: {
					BillNO: '',
					S_ClientID: 0,
					S_ClientName: '',
					S_BranchID: 0,
					S_BranchName: ''
				},
				formDetailData: [],
				printData: []
			},
			created: function () {
				var that = this;
				if (historyData) {
					that.formID = historyData.BillID;
					that.type = historyData.BillType;
					that.formData = {
						BillNO: historyData.BillNO || '',
						S_ClientID: historyData.ClientID || 0,
						S_ClientName: historyData.ClientName || '',
						S_BranchID: historyData.BranchID || 0,
						S_BranchName: historyData.BranchName || ''
					}
					that.getDetailData();

				}

			},
			methods: {
				getWidth(){
                    return api.winWidth + 'px';
                },
				getSealImage() {
					var that = this;
					if (that.sealType == 1) {
						return '../image/confirmed.png';
					}
					if (that.sealType == 2) {
						return '../image/paying.png';
					}
					if (that.sealType == 3) {
						return '../image/payed.png';
					}
				},
				getDetailData() {
					var that = this;
					var obj = {
						S_BillType: that.type,
						S_B_Type: 3,
						S_BillID: that.formID
					}

					that.showLoading = true;
					FLD.ajax('AP_HisListDe_A', obj, function (res) {
						that.showLoading = false;
						if (res.ds[0].status && res.ds[0].status == 500) {
							layer.open({
								content: res.ds[0].msg,
								skin: 'msg',
								time: 2
							});
						} else {
							for (var i in res.ds) {
								var row = res.ds[i];
								that.formDetailData.push({
									showDetail: false,
									id: row.ProductID,
									detailID: row.BillDeID,
									name: row.ProductName,
									code: row.ProductCode,
									spec: row.ProductSpec,
									num: row.BNum,
									price: row.DPrice || 0,
									stockID: row.StockID,
									stockName: row.StockName,
									cargoID: row.CargoID,
									cargoName: row.CargoName,
									stockNum: row.StockNum,
									unit: row.UnitName,
									remark: row.SPBZ
								})
							}

							that.getPrintBill();
						}
					})
				},
				getPrintBill() {
					var that = this;
					var obj = {
						S_BranchID: that.formData.S_BranchID,
						S_ClientID: that.formData.S_ClientID
					}
					FLD.ajax('AP_PrintIFMN', obj, function (res) {
						var infoData = res.ds[0];
						var nodeArray = [];
						var totalNum = 0;
						for (var i in that.formDetailData) {
							totalNum += that.formDetailData[i].num;
							nodeArray.push({
								'名称': that.formDetailData[i].name,
								'数量': that.formDetailData[i].num,
								'单价': that.formDetailData[i].price,
								'金额': that.formDetailData[i].num * that.formDetailData[i].price
							}, {
								'备注': that.formDetailData[i].remark
							})
						}
						that.printData = {
							title: '福路德汽配连锁',
							subtitle: '随货同行单',
							top: {
								'单据号': that.formData.BillNO,
								'客户名称': that.formData.S_ClientName,
								'客户联系方式': infoData.S_CTel,
								'累计应付': infoData.S_YSYE,
								'会员充值余额': infoData.S_VIPYE
							},
							node: nodeArray,
							center: {
								'合计数量': totalNum,
								'合计金额': that.getTotalPrice()
							},
							bottom: {
								'公司地址': infoData.S_BAddr,
								'联系人': infoData.S_BLnkM,
								'联系方式': infoData.S_BTel,
							}


						}
					})
				},

				getTotalCount() {
					var totalCount = 0;
					for (var i in this.formDetailData) {
						totalCount += this.formDetailData[i].num
					}
					return totalCount;
				},
				getTotalPrice() {
					var totalPrice = 0;
					for (var i in this.formDetailData) {
						totalPrice += this.formDetailData[i].num * this.formDetailData[i].price
					}
					return totalPrice;
				},
				toggleShowMain() {
					this.showMain = !this.showMain;
				},
				toggleShowDetail(row) {
					row.showDetail = !row.showDetail;
				},

				onClickLeft() {
					api.closeWin();

				}
			}
		})
	};
</script>

</html>